<!-- home -->
<template>
  <div>
    <van-nav-bar :title="type ? categoryName : '课程详情'" left-arrow :fixed="true" :placeholder="true" @click-left="$router.go(-1)" />
    <div class="index-container">
      <div class="main-box">
        <van-tabs v-model="active" color="#ff9235" sticky>
          <van-tab title="视频观看" name="0">
            <div class="line"></div>
            <van-list
              v-model="listVideo.loading"
              :finished="listVideo.finished"
              finished-text="没有更多了"
              @load="fetchVideoList"
            >
              <div class="item-video-box" @click="goDetailsCourse(item)" v-for="item,index in listVideo.list" :key="index">
                <div class="img-box">
                  <img :src="item.url">
                  <template v-if="!item.isBuy">
                    <van-tag color="#ff3535" v-if="item.price">￥{{item.price}}</van-tag>
                    <van-tag color="#35ff4e" v-else>免费</van-tag>
                  </template>
                  <template v-else><van-tag color="#35ff4e">已购买</van-tag></template>
                </div>
                <div class="info-box">
                  <div class="title">{{item.name}}</div>
                  <div class="info">{{item.desc}}</div>
                  <div class="edit-box">{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
                </div>
              </div>
            </van-list>
          </van-tab>
          <van-tab title="直播课程" name="1">
            <div class="line"></div>
              <div style="display: flex;" v-if="liveCourse.list.length === 1">
                  <van-list
                          v-model="liveCourse.loading"
                          :finished="liveCourse.finished"
                          @load="fetchLiveCourseList"
                          style="width: 50%;"
                  >
                      <div class="item-video-box" @click="goToLiveVideoDetail(item.id)" v-for="item,index in liveCourse.list" :key="index">

                          <div class="content-box">
                              <div class="on-left">
                                  <div class="img-box">
                                      <img :src="item.cover">
                                      <van-tag color="#ff3535">{{item.category.name}}</van-tag>
                                  </div>
                                  <h3>{{item.name}}</h3>
                                  <div class="info">{{item.desc}}</div>
                                  <div class="info" style="margin-top: 15px">{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
                              </div>
                          </div>
                      </div>
                  </van-list>
              </div>
            <div style="display: flex;" v-else>
                <van-list
                        v-model="liveCourse.loading"
                        :finished="liveCourse.finished"
                        @load="fetchLiveCourseList"
                        style="width: 50%;"
                >
                    <div class="item-video-box" @click="goToLiveVideoDetail(item.id)" v-for="(item, index) in liveCourse.list.filter((dd, ddIndex) => ddIndex % 2 == 1)" :key="index">

                        <div class="content-box">
                            <div class="on-left">
                                <div class="img-box">
                                    <img :src="item.cover">
                                    <van-tag color="#ff3535">{{item.category.name}}</van-tag>
                                </div>
                                <h3>{{item.name}}</h3>
                                <div class="info">{{item.desc}}</div>
                                <div class="info" style="margin-top: 15px">{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
                            </div>
                        </div>
                    </div>
                </van-list>

                <van-list
                        v-model="liveCourse.loading"
                        :finished="liveCourse.finished"
                        @load="fetchLiveCourseList"
                        style="width: 50%;"
                >
                    <div class="item-video-box" @click="goToLiveVideoDetail(item.id)" v-for="(item, index) in liveCourse.list.filter((dd, ddIndex) => ddIndex % 2 == 0)" :key="index">

                        <div class="content-box">
                            <div class="on-right">
                                <div class="img-box">
                                    <img :src="item.cover">
                                    <van-tag color="#ff3535">{{item.category.name}}</van-tag>
                                </div>
                                <h3>{{item.name}}</h3>
                                <div class="info">{{item.desc}}</div>
                                <div class="info" style="margin-top: 15px">{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>

              <div class="item-header" style="text-align: center;font-size: 14px;margin: 30px;">没有更多了..</div>

          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { articleList } from '@/api/article.js'
import { list, courseAll } from '@/api/course.js'
import { orderAdd,orderAll } from '@/api/order.js'
import api from '@/api'
import dayjs from 'dayjs'

export default {
  data() {
    return {
      active:0,
      type: null,
      categoryName: null,
      courseOrderList:[],
      listVideo:{
        loading: false,
        finished: false,
        listQuery:{
          pageSize:20,
          pageNum:0,
        },
        list:[]
      },
      liveCourse:{
        loading: false,
        finished: false,
        listQuery:{
          pageSize:20,
          pageNum:0,
        },
        list:[]
      },
      listStory:{
        loading: false,
        finished: false,
        listQuery:{
          pageSize:20,
          pageNum:0,
        },
        list:[]
      },
    }
  },

  computed: {},

  mounted() {
    // this.fetchOrderList()
  },
  created() {
    this.type = this.$route.query.type
    this.active = this.$route.query.active
    this.categoryName = this.$route.query.categoryName
  },
  methods: {
    async fetchOrderList() {
      await orderAll({userId: Number(this.$store.getters.userId)}).then(res => {
        if (res.code == 200) {
          this.courseOrderList = res.data
          this.listVideo.list.forEach((ite,ind)=>{
            this.courseOrderList.forEach((item,index)=>{
              if(item.courseId == ite.id){
                this.$set(ite,'isBuy',true)
              }
            })
          })
        } else {
          this.$notify(res.message)
        }
      })
    },
    async fetchLiveCourseList() {
      this.liveCourse.listQuery.pageNum ++
      await api.liveCourse.all({categoryId: this.type}).then(res => {
        if (res.code == 200) {
          this.liveCourse.list = res.data
          let single = [];
          let double = [];
          this.liveCourse.list.map(item => {
            if (item.id % 2 == 1) {
              // 奇数
              single.push(item.id)
            } else {
              double.push(item.id)
            }
          })
          this.liveCourse.loading= false
           if(res.data.count > this.liveCourse.list.length){
            this.liveCourse.finished = false
          }else{
            this.liveCourse.finished = true
          }
        } else {
          this.$notify(res.message)
        }
      })
    },
    async fetchStoryList() {
      this.listStory.listQuery.pageNum ++
      await articleList({...this.listStory.listQuery,categoryId:16}).then(res => {
        if (res.code == 200) {
          this.listStory.list = this.listStory.list.concat(res.data.rows)
          this.listStory.loading= false
           if(res.data.count > this.listStory.list.length){
            this.listStory.finished = false
          }else{
            this.listStory.finished = true
          }
        } else {
          this.$notify(res.message)
        }
      })
    },
    async fetchVideoList() {
      this.listVideo.listQuery.pageNum ++
      await list({...this.listVideo.listQuery, pageSize: 5, categoryId: this.type}).then(res => {
        if (res.code == 200) {
          this.listVideo.list = this.listVideo.list.concat(res.data.rows)
          this.listVideo.loading= false
          this.fetchOrderList()
          if(res.data.count > this.listVideo.list.length){
            this.listVideo.finished = false
          }else{
            this.listVideo.finished = true
          }
        } else {
          this.$notify(res.message)
        }
      })
    },
    goDetails(id,isCourse){
      this.$router.push({
        path:'/richPage?id='+id+'&course='+isCourse
      })
    },
    goToLiveVideoDetail(id) {
      this.$router.push('/liveVideoDetails?liveCourseId=' + id);
    },
    goDetailsCourse(item){
      /*if(item.price && !item.isBuy){
        this.$dialog.confirm({
          message: `确认支付 ￥${item.price} 购买课程吗？`,
        })
        .then(() => {
          // on confirm
          this.handleOrder(item.id)
        })
        .catch(() => {
          // on cancel
        });
      }else{
        this.$router.push({
          path:'/videoDetails?courseId='+item.id
        })
      }*/
      this.$router.push({
        path:'/videoDetails?courseId='+item.id
      })

    },
    async handleOrder(id){
      await orderAdd({courseId:id,userId:Number(this.$store.getters.userId)}).then(res => {
        if (res.code == 200) {
          this.$toast.success('支付成功~');
          setTimeout(()=>{
            this.$toast.clear()
            this.$router.push({
              path:'/videoDetails?courseId='+id
            })
          },1500)
        } else {
          this.$notify(res.message)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.index-container {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  .van-cell{
    background: #f8f8f8;
  }
  .item-video-box{
    background: #fff;
    border-radius: .2778rem;
    display: flex;
    align-items: center;
    padding:.2778rem;
    box-sizing: border-box;
    width: 94%;
    margin:.2778rem auto 0;

      .content-box {
          display: flex;
          justify-content: space-around;
          width: 100%;
          .on-left {
              .info {
                  /*height: 28px;*/
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
              }
          }
          .on-right {
              .info {
                  /*height: 28px;*/
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
              }
          }
      }
    .img-box{
      flex: 0 0 3rem;
      position: relative;
      img{
        width:100%;
        height: 2.2rem;
        border-radius: .1389rem;
      }
      .van-tag{
        position: absolute;
        top: .1389rem;
        left: .1389rem;
      }
    }
    .info-box{
      flex:1;
      padding: .1389rem .1389rem .1389rem .2778rem;
      box-sizing: border-box;
      height: 2.2rem;
      position: relative;
      .title{
        width:5.5rem;
        font-size: .4167rem;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .info{
        font-size: .3333rem;
        color: #999;
        margin-top: .1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .edit-box{
        position: absolute;
        left: .2778rem;
        bottom: .1rem;
        font-size: .3333rem;
        color: #999;
        width: 100%;
        .van-icon{
          min-width: 1.7rem;
          color: #666;
          display: inline-block;
          &::before{
            margin-right: .1389rem;
            font-size: .3333rem;
            font-weight: bold;
            color: #ff9235;
          }
        }
      }
    }
  }
}
</style>
